<!--游戏战绩预览卡片-->
<script setup lang="js">
import {defineProps} from "vue";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";
import KDA from "@share/components/lcu/KDA.vue";
import LcuItem from "@share/components/lcu/LcuItem.vue";
import 'moment-duration-format'
import LcuChampionProfile from "@share/components/lcu/LcuChampionProfile.vue";
import LcuSpellProfile from "@share/components/lcu/LcuSpellProfile.vue";
import LcuPerk from "@share/components/lcu/LcuPerk.vue";

const {currentParticipantInfo, participantInfos} = defineProps({
  "currentParticipantInfo": {},
  "participantInfos": {}
})

const isSuccess = (result) => {
  return result === 'Win';
}

</script>

<template>

  <div class="game-record-single-preview-card-container"
       :class="isSuccess(currentParticipantInfo?.info?.baseInfo?.win)?'is_success':'is_failed'">
    <!--    基础数据-->
    <div style="display: flex;flex-direction: column;justify-content: center;width: 140px">
      <el-text size="default" tag="strong">{{
          currentParticipantInfo?.info?.baseInfo?.queue.queueName
        }}({{ currentParticipantInfo?.info?.baseInfo?.mapInfo?.mapName }})
      </el-text>
      <el-text>{{ currentParticipantInfo?.info?.baseInfo?.gameStartTime }}</el-text>
      <el-divider style="margin: 4px 0 "/>
      <el-text
          :type="isSuccess(currentParticipantInfo?.info?.baseInfo?.win)?'success':'danger'"
          tag="strong">{{ currentParticipantInfo?.info?.baseInfo?.isWin }}
      </el-text>
      <el-text size="small">{{ currentParticipantInfo?.info?.baseInfo?.useTimeText }}</el-text>
    </div>

    <!--    英雄信息-->
    <div style="display: flex;flex-direction: column;justify-content: center;width: 240px">
      <div style="display: flex;align-items: center">
        <!--        英雄头像-->
        <div style="display: flex;align-items: center">
          <LcuChampionProfile size="default" :championId="currentParticipantInfo?.info?.champion?.championId"/>
          <!--        召唤师技能-->
          <div style="display: flex;flex-direction: column;margin: 0 6px">
            <LcuSpellProfile
                :spell-id="currentParticipantInfo?.info?.champion?.spell.d"/>
            <LcuSpellProfile
                :spell-id="currentParticipantInfo?.info?.champion?.spell.f"/>
          </div>
          <!--        天赋-->
          <div>
            <LcuPerk :perk-info="currentParticipantInfo?.info?.champion?.perkStyle"/>
          </div>

          <KDA
              :k="currentParticipantInfo?.info?.data?.kda?.k"
              :d="currentParticipantInfo?.info?.data?.kda?.d"
              :a="currentParticipantInfo?.info?.data?.kda?.a"
          />
        </div>

      </div>
      <!--      <el-text style="margin-top: 16px">{{ currentParticipantInfo?.info?.champion?.championName }}</el-text>-->
      <div style="display: flex">

        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item0" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item1" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item2" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item3" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item4" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item5" style="margin-left: 2px"></LcuItem>
        <LcuItem :itemId="currentParticipantInfo?.info?.champion?.items?.item6" style="margin-left: 2px"></LcuItem>
      </div>
    </div>

    <!--    数据分析-->
<!--    <div style="display: flex;flex-direction: column;justify-content: center;width: 120px">-->
<!--      <el-text>等级{{ currentParticipantInfo?.info?.data?.champLevel }}</el-text>-->
<!--      <el-text>金币 :{{ ((currentParticipantInfo?.info?.data?.goldEarned) / 1000).toFixed(1) }}K</el-text>-->
<!--      <el-text>输出：{{ (currentParticipantInfo?.info?.data?.totalDamageDealtToChampions / 1000).toFixed(1) }}k</el-text>-->
<!--      &lt;!&ndash;            <el-text>承伤：2.2k</el-text>&ndash;&gt;-->
<!--    </div>-->

    <!--    斗魂竞技场-->
    <template v-if="currentParticipantInfo?.info?.baseInfo?.queue?.gameMode==='CHERRY'">

      <div style="display: flex;width: 360px;flex-wrap: wrap">

        <template v-for="(teamInfo,teamIdx) in participantInfos">

          <div style="display: flex">
            <div v-for="(singleSummoner,suIdx) in teamInfo" style="width: 90px;display: flex">
              <LcuChampionProfile style="width: 16px;height: 16px" :championId="singleSummoner?.champion?.championId"/>
              <LcuSummonerName style="font-size: small;width: 70px" :name="singleSummoner?.player?.gameName"
                               :num="singleSummoner?.player?.tagLine"
                               :show-num="false"/>
              <template v-if="teamIdx%2 ===0 && suIdx===1">
                <el-divider
                    direction="vertical" style="margin:0 2px;border-left: 1px #606266 var(--el-border-style);"/>
              </template>

            </div>
          </div>

        </template>

      </div>

    </template>

    <template v-else>
      <div style="display: flex;width: 360px">
        <div style="display: flex;flex-direction: column;align-items: flex-start;flex-grow:1"
             v-for="teamInfo in participantInfos">
          <div v-for="item in teamInfo"
               style="display: flex;align-items: center;justify-content: flex-start;width: 120px;height: 18px;line-height: 1">
            <LcuChampionProfile style="width: 16px;height: 16px" :championId="item?.champion?.championId"/>
            <LcuSummonerName style="font-size: small;width: 100px" :name="item?.player?.gameName"
                             :num="item?.player?.tagLine"
                             :show-num="false"/>
          </div>
        </div>
      </div>

    </template>


  </div>

</template>

<style scoped lang="scss">

.is_success {
  background-color: var(--var-success-background-color);
}

.is_failed {
  background-color: var(--var-failed-background-color);
}

.game-record-single-preview-card-container {
  //padding: 6px;
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;


  //& > div {
  //  height: 90%;
  //}
  //
  //.game-record-single-champion-avatar-wrapper {
  //  margin: 0 6px 0 12px
  //}
  //
  //.game-record-single-champion-name-wrapper {
  //  &:hover {
  //    cursor: pointer;
  //  }
  //}


}
</style>